// 所有文章数据
// 格式说明：
// [
//   {
//     id: Number,             // 文章唯一ID
//     title: String,          // 文章标题
//     excerpt: String,        // 文章摘要
//     date: String,           // 发布日期 (YYYY-MM-DD)
//     category: String,       // 文章分类
//     author: String,         // 作者
//     tags: Array<String>,    // 文章标签数组
//     image: String,          // 封面图片URL
//     content: String         // 文章内容，必须是一行Markdown文本，换行请用 \n 表示
//   },
//   ...
// ]
const allPosts = [
  {
    id: 1,
    title: 'Vue 3 Composition API 实战指南',
    excerpt: '深入了解Vue 3的新特性Composition API，以及如何在实际项目中应用。掌握响应式系统的核心原理和最佳实践。',
    date: '2025-01-15',
    category: '前端开发',
    author: '张三',
    tags: ['Vue', 'JavaScript', '前端'],
    image: 'https://picsum.photos/seed/vue3/600/400',
    content: '# Vue 3 Composition API 实战指南\n\n## 什么是 Composition API\n\nComposition API 是 Vue 3 引入的一组新的 API，它提供了更灵活的组件逻辑组织方式，让开发者可以根据逻辑关系而不是生命周期钩子来组织代码。\n\n## 核心概念\n\n### setup 函数\n\nsetup 函数是 Composition API 的入口点，它在组件实例创建之前执行。\n\n## 响应式系统\n\nVue 3 提供了 ref 和 reactive 两种创建响应式数据的方式。\n\n## 生命周期钩子\n\nComposition API 提供了一系列生命周期钩子函数。\n\n## 最佳实践\n\n1. 按功能组织代码，将相关的状态和方法放在一起\n2. 使用自定义 Hook 复用逻辑\n3. 优先使用 ref 还是 reactive，取决于数据的复杂度\n4. 避免在 setup 函数中使用 this\n\n通过本文的介绍，相信你已经对 Vue 3 Composition API 有了基本的了解。在实际项目中，Composition API 可以帮助你更好地组织和复用组件逻辑，提高代码的可维护性。'
  },
  {
    id: 2,
    title: '现代化CSS布局技术',
    excerpt: '探索Flexbox和Grid等现代CSS布局技术，创建响应式网页设计。掌握新一代CSS布局方法，提升开发效率。',
    date: '2025-01-10',
    category: '前端开发',
    author: '李四',
    tags: ['CSS', '布局', '响应式'],
    image: 'https://picsum.photos/seed/css3/600/400',
    content: '# 现代化CSS布局技术\n\n## Flexbox 布局\n\nFlexbox（弹性盒子）是一种一维布局模型，它可以让容器内的元素在主轴方向上进行灵活排列。\n\n## CSS Grid 布局\n\nGrid（网格）是一种二维布局模型，它可以同时处理行和列，非常适合创建复杂的布局结构。\n\n## 响应式布局\n\n结合媒体查询和现代布局技术，可以创建出适应不同屏幕尺寸的响应式布局。\n\n## 最佳实践\n\n1. 优先使用 Flexbox 进行一维布局，Grid 进行二维布局\n2. 避免使用浮动和定位来实现主要布局结构\n3. 使用相对单位（如 rem, em, vw, vh）代替固定像素值\n4. 结合 CSS 变量实现更加灵活的布局系统\n\n现代CSS布局技术的发展极大地简化了网页布局的实现方式，提高了开发效率和代码可维护性。通过掌握这些技术，你可以轻松创建出各种复杂的布局结构，同时保证良好的响应式体验。'
  },
  {
    id: 3,
    title: 'Node.js性能优化实践',
    excerpt: '分享Node.js应用性能优化的实用技巧和最佳实践。从内存管理到异步处理，全面提升应用性能。',
    date: '2025-01-05',
    category: '后端开发',
    author: '王五',
    tags: ['Node.js', '性能', '优化'],
    image: 'https://picsum.photos/seed/nodejs/600/400',
    content: '# Node.js性能优化实践\n\n## 内存管理优化\n\nNode.js 应用的内存管理是性能优化的重要方面。\n\n## 异步操作优化\n\nNode.js 是基于事件驱动的异步非阻塞I/O模型，合理使用异步操作可以显著提升性能。\n\n## 数据库优化\n\n数据库操作通常是应用性能的瓶颈之一。\n\n## 缓存策略\n\n合理使用缓存可以显著减少数据库查询和计算开销。\n\n## 性能监控与分析\n\n定期监控和分析应用性能是优化的重要环节。\n\n通过实施这些性能优化技巧，你可以显著提升Node.js应用的性能和可扩展性，为用户提供更好的体验。记住，性能优化是一个持续的过程，需要不断监控、分析和改进。'
  },
  {
    id: 4,
    title: 'React Hooks完全指南',
    excerpt: '全面解析React Hooks的使用方法和高级技巧。掌握useState、useEffect等核心Hooks的使用场景和注意事项。',
    date: '2024-12-20',
    category: '前端开发',
    author: '赵六',
    tags: ['React', 'Hooks', '前端'],
    image: 'https://picsum.photos/seed/react/600/400',
    content: '# React Hooks完全指南\n\n## 什么是React Hooks\n\nReact Hooks 是 React 16.8 引入的新特性，它允许你在不编写 class 的情况下使用 state 以及其他的 React 特性。\n\n## 基础Hooks\n\n### useState\n\nuseState 是最基础的 Hook，它允许你在函数组件中添加 state。\n\n### useEffect\n\nuseEffect 让你可以在函数组件中执行副作用操作（数据获取、订阅、手动更改DOM等）。\n\n### useContext\n\nuseContext 让你可以不使用 props 链而直接访问 React Context。\n\n## 额外的Hooks\n\n### useReducer\n\nuseReducer 是 useState 的替代方案，适用于复杂的 state 逻辑。\n\n### useCallback\n\nuseCallback 用于缓存函数，避免不必要的重新渲染。\n\n### useMemo\n\nuseMemo 用于缓存计算结果，避免不必要的重复计算。\n\n## 自定义Hooks\n\n你可以创建自己的 Hooks 来复用状态逻辑。\n\n## 最佳实践\n\n1. 只在组件的顶层调用Hook，不要在循环、条件或嵌套函数中调用\n2. 只在React函数组件中调用Hook，不要在普通JavaScript函数中调用\n3. 使用ESLint插件 eslint-plugin-react-hooks 帮助遵循Hook规则\n4. 合理使用 useCallback 和 useMemo 避免不必要的性能开销\n5. 提取可复用逻辑为自定义Hook\n\nReact Hooks 是 React 开发中的重要工具，掌握它们可以让你编写更加简洁、可维护的React代码。通过本文的介绍，希望你已经对React Hooks有了全面的了解，并能在实际项目中灵活应用。'
  },
  {
    id: 5,
    title: 'TypeScript进阶指南',
    excerpt: '深入掌握TypeScript的高级用法，包括泛型、装饰器、类型推断和模块化开发，提升代码的健壮性和可维护性。',
    date: '2025-01-18',
    category: '前端开发',
    author: '周七',
    tags: ['TypeScript', '前端', '类型系统'],
    image: 'https://picsum.photos/seed/typescript/600/400',
    content: '# TypeScript进阶指南\n\n## 泛型\n\n泛型使代码具有更高的复用性和灵活性。\n\n## 装饰器\n\n装饰器为类和方法提供了更强大的元编程能力。\n\n## 类型推断\n\nTypeScript 提供了强大的类型推断机制，减少了显式声明的需求。\n\n## 模块化开发\n\n通过模块化机制组织代码，提高可维护性。\n\n## 最佳实践\n\n1. 使用严格模式提升类型安全\n2. 善用泛型编写通用工具函数\n3. 合理使用装饰器增强代码功能\n4. 使用路径别名优化模块导入\n\n掌握这些高级用法，你可以充分发挥 TypeScript 的威力，让项目更加健壮和可维护。'
  },
  {
    id: 6,
    title: 'Webpack 5 配置详解',
    excerpt: '系统解析Webpack 5的核心概念与配置方法，从基础到高级优化，帮助你构建高效的前端项目。',
    date: '2025-01-22',
    category: '前端开发',
    author: '钱八',
    tags: ['Webpack', '前端构建', '优化'],
    image: 'https://picsum.photos/seed/webpack/600/400',
    content: '# Webpack 5 配置详解\n\n## 基础配置\n\nWebpack 的 entry、output 和 loader 是核心配置。\n\n## 插件机制\n\n插件扩展了 Webpack 的功能，例如 HtmlWebpackPlugin、DefinePlugin。\n\n## 代码分割\n\n利用 splitChunks 提升项目加载性能。\n\n## 性能优化\n\nTree Shaking 和缓存策略可以显著优化构建结果。\n\n## 最佳实践\n\n1. 按环境拆分配置文件\n2. 使用缓存和持久化提升构建效率\n3. 合理使用插件避免构建变慢\n4. 开发模式与生产模式分离\n\nWebpack 5 提供了更强大和灵活的配置能力，让你能够更高效地管理前端项目。'
  },
  {
    id: 7,
    title: '微前端架构实践',
    excerpt: '介绍微前端的核心理念与落地实践，解决大型前端项目的可维护性与团队协作问题。',
    date: '2025-01-28',
    category: '前端架构',
    author: '孙九',
    tags: ['微前端', '架构', '前端'],
    image: 'https://picsum.photos/seed/microfrontend/600/400',
    content: '# 微前端架构实践\n\n## 核心理念\n\n微前端借鉴了微服务的思想，将前端应用拆分为多个独立模块。\n\n## 技术选型\n\n常见的微前端框架有 single-spa、qiankun。\n\n## 集成方式\n\n可以通过 iframe、路由分发或组件化集成多个子应用。\n\n## 团队协作\n\n微前端支持多团队并行开发，降低耦合度。\n\n## 最佳实践\n\n1. 保持子应用独立可部署\n2. 避免全局状态污染\n3. 使用共享依赖减少体积\n4. 统一规范和工具链\n\n通过微前端架构，前端团队可以更高效地协作并维护复杂应用。'
  },
  {
    id: 8,
    title: 'Docker容器化部署指南',
    excerpt: '学习如何使用Docker对应用进行容器化，实现跨平台部署与高效运维。',
    date: '2025-02-02',
    category: 'DevOps',
    author: '周十',
    tags: ['Docker', '容器化', '部署'],
    image: 'https://picsum.photos/seed/docker/600/400',
    content: '# Docker容器化部署指南\n\n## Docker 基础\n\nDocker 提供了轻量级的虚拟化方式，将应用与运行环境打包在一起。\n\n## 镜像与容器\n\n镜像是应用的模板，容器是运行的实例。\n\n## Dockerfile\n\n通过 Dockerfile 可以定义应用的构建过程。\n\n## 部署流程\n\n1. 编写 Dockerfile\n2. 构建镜像\n3. 运行容器\n4. 发布到仓库\n\n## 最佳实践\n\n1. 使用多阶段构建优化镜像体积\n2. 定期更新基础镜像提升安全性\n3. 使用 docker-compose 管理多容器应用\n4. 配合 CI/CD 实现自动化部署\n\n掌握 Docker 容器化部署，你可以实现应用的快速交付与高效运维。'
  },
  {
    id: 9,
    title: '2025年前端开发趋势与最佳实践',
    excerpt: '深入探讨2025年前端开发领域的主要趋势和最佳实践，包括前端框架发展、性能优化、CSS未来趋势等。',
    date: '2025-03-10',
    category: '前端开发',
    author: '李明',
    tags: ['前端趋势', 'JavaScript', 'Vue.js', 'React', '性能优化'],
    image: 'https://picsum.photos/seed/frontend2025/800/400',
    content: '# 2025年前端开发趋势与最佳实践\n\n## 1. 引言\n\n随着Web技术的快速发展，前端开发领域也在持续演进。2025年，我们看到了一些令人兴奋的新技术、工具和方法论的出现，这些都在改变着我们构建Web应用的方式。本文将深入探讨今年前端开发的主要趋势和最佳实践。\n\n## 2. 前端框架与库的新发展\n\n## 3. 性能优化策略\n\n## 4. CSS的未来\n\n## 5. 开发工具与工作流程\n\n## 6. 总结与展望\n\n2025年是前端开发领域激动人心的一年，我们看到了技术的快速进步和最佳实践的不断完善。作为前端开发者，保持学习的态度和对新技术的开放心态至关重要。\n\n通过采用本文讨论的趋势和最佳实践，你可以构建出更高效、更可维护、更用户友好的Web应用。让我们一起迎接前端开发的未来！'
  }

];

const mockData = {
  // 文章数据
  getPostById(id) {
    const postId = parseInt(id);
    return allPosts.find(post => post.id === postId) || null;
  },

  // 相关文章数据
  getRelatedPosts() {
    return [
      { id: 2, title: '深入理解WebAssembly及其在前端的应用', date: '2025-02-28' },
      { id: 3, title: '微前端架构设计与实践', date: '2025-02-15' },
      { id: 4, title: '前端性能监控与优化实战', date: '2025-02-01' }
    ];
  },

  // 评论数据
  getComments() {
    return [
      { id: 1, author: '张小明', content: '这篇文章非常有深度，学到了很多Vue 3的新特性！', date: '2025-03-11' },
      { id: 2, author: '李华', content: '感谢分享，这些最佳实践对我的项目很有帮助。', date: '2025-03-12' },
      { id: 3, author: '王小红', content: '期待更多关于前端性能优化的文章。', date: '2025-03-13' }
    ];
  }
};

export default mockData;
export { allPosts };
